<template>
  <div class="in-win" v-show="props.show" :class="[klass]">
    <div class="flex justify-between">
      <div>{{ props.title }}</div>
      <div><CloseOutlined @click="onClose" /></div>
    </div>
    <a-divider class="my-2"></a-divider>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { CloseOutlined } from "@ant-design/icons-vue";
import { computed } from "vue";

const emits = defineEmits(["update:show"]);
const props = defineProps({
  show: {
    type: Boolean,
    delfault: false
  },
  title: {
    type: String,
    delfault: ""
  },
  theme: {
    type: String,
    default: "light"
  }
});

const onClose = () => {
  emits("update:show", false);
};

const style = computed(() => {
  return {};
});
const klass = computed(() => {
    console.log(props.theme);
  return [props.theme];
});
</script>

<style lang="scss" scoped>
.in-win {
  z-index: 10;
  position: fixed;
}
.light {
  background-color: white;
}
</style>
